<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
    <script src="./lib/vue.js"></script>
    <style>
        .inner {
            height: 150;
            width: 150;
            padding: 10px;
            background: red;
        }
    </style>
</head>
<body>
    <!-- <div id="app">
        <input type="button" name="" id="" :value="msg2" @click='lang'>
        <input type="button" name="" id="" :value='msg3' @click='stop'>
        <p v-text='msg'></p>
    </div> -->
    <div id="app" class="inner" @click.capture='divClick'>
        <input type="button" value="点我" @click='btnclick'>
    </div>
    <!-- <a id="app" href="http://www.baidu.com" @click.prevent='aClick'>{{msg}}</a> -->
    <script>
        var vm = new Vue({
            el : '#app',
            data : {
                msg : '上海自来水来自上海',
                msg2 : '浪起来',
                msg3 : '停止',
                intervarId : null
            },
            methods : {
                divClick(){
                    console.log('这是div的点击事件');
                },
                btnclick(){
                    console.log('这是btn点击事件');
                },
                aClick(){
                    console.log('这是a标签的点击事件');
                }
                // lang(){
                //     if(this.intervarId != null)return;
                //     this.intervarId = setInterval(() => {
                //     var start = this.msg.substring(0,1);
                //     var end = this.msg.substring(1);
                //     this.msg = end + start;
                //     },400)
                // },
                // stop(){
                //     clearInterval(this.intervarId)
                //     this.intervarId = null;
                // }
            }
        });
    </script>
</body>
</html>